<template>
	<view class="login">
		<view class="top">
			<image class="top-img" src="../../static/login_top.png"></image>
			<image class="logo-img" src="../../static/set/icon_073.png"></image>
		</view>

		<view class="center">
			<view class="account">
				<image class="img" src="../../static/set/set_phone.png"></image>

				<input class="input-phone" type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" />

			</view>

			<view class="pwd">
				<image class="img" src="../../static/login_lock.png"></image>
				<input class="pwd" :password="isShowPWd" v-model="pwd" placeholder="请输入密码" />
				<image class="eye" v-bind:src="clickEye" @click="eyeBtnClick"></image>
			</view>
			<view class="line"></view>
			<view class="wjmm">
				<button class="btn-wjmm" type="default" @click="forgetPwd">忘记密码?</button>
				<button class="btn-login" type="primary" @click="login">登录</button>
			</view>

		</view>


		<view class="bottom">

			<view class="bottom-top">
				<button class="gouxuan" @click="isSelectImg">
					<image class="img" v-bind:src="gouxuanImg"></image>
					<text class="text">点击登录即视为接受以下条款</text>
				</button>
			</view>

			<view class="bottom-bottom">
				<text @click="userAgreement">《路易宝用户服务协议</text>
				<text @click="addAgreement">《路易宝增值服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'
	export default {


		data() {
			return {
				isShowPWd: true, //控制显示密码
				mobile: '', //手机号
				pwd: '', //密码
				gouxuanImg: "../../static/login_001.png", //默认图片
				isSelect: false,
				clickEye: "../../static/login_eye.png",

			}
		},
		methods: {
			isSelectImg() {
				this.isSelect = !this.isSelect
				if (this.isSelect == true) {
					this.gouxuanImg = "../../static/login_002.png"
				} else {
					this.gouxuanImg = "../../static/login_001.png"
				}
			},

			eyeBtnClick() {
				console.log('眼睛')
				this.isShowPWd = !this.isShowPWd
				if (this.isShowPWd == true) {
					this.clickEye = "../../static/login_eye.png"
				} else {
					this.clickEye = "../../static/login_close_eye.png"

				}
			},

			forgetPwd() {
				console.log('忘记密码')
			},

			login() {
				console.log('登录')

				if (this.mobile.length === 0) {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					})
					return false
				}
				if (this.mobile.pwd === 0) {
					uni.showToast({
						title: '请输入您的密码',
						icon: 'none'
					})
					return false
				}

				if (this.isSelect === false) {
					uni.showToast({
						title: '请阅读并勾选服务协议',
						icon: 'none'
					})
					return false
				}

				this.$londing();
				var m = new Buffer(this.mobile).toString('base64');
				var p = new Buffer(this.pwd).toString('base64');

				ajax(url.login, {
					data: {
						mobile: m,
						password: p
					}
				}).then(res => {
					console.log(res)
					try {
						if (res.data.code != 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return false
						}
						uni.setStorageSync('token', res.data.data.token)
						// uni.navigateBack()
						uni.reLaunch({
							url: '/pages/index/index'
						});


					} catch (e) {
						console.log()
					}
				}).catch(err => {
					console.log(err)
				})

			},
			userAgreement() {
				console.log('用户协议')
				this.$routerX.push('/pages/public/userAgreement/userAgreement', {
					"id": "1",
				})
			},
			addAgreement() {
				console.log('增值协议')
				this.$routerX.push('/pages/public/userAgreement/userAgreement', {
					"id": "2",
				})
			}

		}
	}
</script>

<style lang="scss">
	.login {
		.top {

			.top-img {
				width: 100%;
				height: 191rpx;
			}

			.logo-img {
				width: 140rpx;
				height: 140rpx;
				//图片居中
				display: block;
				margin: 10rpx auto;
			}
		}

		.center {
			// background-color: red;
			margin-top: 50rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;

			.account {
				// background-color: blue;
				line-height: 141rpx;
				padding: 50rpx 0 20rpx 30rpx;
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #eee;

				.img {
					width: 38rpx;
					height: 38rpx;
				}

				.input-phone {
					margin-left: 46rpx;
					font-size: 15px;
				}
			}

			.pwd {
				display: flex;
				flex-direction: row;
				margin-top: 50rpx;

				.img {
					width: 38rpx;
					height: 38rpx;
					margin-left: 30rpx;
					// margin:   ;
				}

				.pwd {
					margin-left: 46rpx;
					margin-top: 0rpx;
					margin-right: 100rpx;
				}



				.eye {
					width: 35rpx;
					height: 20rpx;
				}

			}

			.line {
				margin-top: 15rpx;
			}

			//忘记密码
			.wjmm {
				.btn-wjmm {
					margin-right: 0rpx;
					width: 200rpx;
					height: 50rpx;
					font-size: 26rpx;
					text-align: center;
				}

				.btn-login {
					margin-top: 50rpx;
					border-radius: 40rpx;
					background-color: $global-Theme-color;
				}
			}
		}

		.bottom {
			margin-top: 400rpx;

			.bottom-top {
				.gouxuan {
					// background-color: gray;
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;

					.img {
						// background-color: red;
						width: 28rpx;
						height: 28rpx;
						margin-top: 30rpx;
					}

					.text {
						margin-top: 18rpx;
						margin-left: 10rpx;
						// background-color: orange;

						font-size: 24rpx;
						height: 28rpx;
					}
				}
			}

			.bottom-bottom {
				text-align: center;
				font-size: 24rpx;
				color: $global-Theme-color;
			}
		}


	}
</style>